<template>
  <uni-forms ref="form" :modelValue="formData" :rules="rules" class="padding">
    <uni-forms-item label="用户名" name="username">
      <uni-easyinput v-model="formData.username" placeholder="请输入用户名" />
    </uni-forms-item>
   
    <uni-forms-item label="密码" name="password">
      <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
    </uni-forms-item>
    
    <button @click="submit">提交</button>
  </uni-forms>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: {
          rules: [{
            required: true,
            errorMessage: '用户名不能为空'
          }, {
            minLength: 3,
            maxLength: 10,
            errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符'
          }]
        },
        password: {
          rules: [{
            required: true,
            errorMessage: '密码不能为空'
          }, {
            minLength: 6,
            errorMessage: '密码长度不能少于 {minLength} 个字符'
          }]
        }
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then(res => {
        console.log('表单验证通过', this.formData)
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      }).catch(err => {
        console.log('表单验证失败', err)
      })
    }
  }
}
</script>